<template>
  <div class="ComFromListStyleBox">
      <div class="ComFromListStyleBox_HeaderTitle">
          <p>
              <a-button>发布</a-button>&nbsp;
              <a-button>下载</a-button>&nbsp;
              <a-button danger ghost>删除</a-button>
          </p>
          <p></p>
          <p> <a-button type="primary"><plus-outlined />新增</a-button>&nbsp;<reload-outlined /></p>
      </div>
      <div class="ComFromListStyleBox_contextTitle">
          <p><input type="checkbox" name="" id="">&nbsp;名称</p>
          <p>路径</p>
          <p>顺序</p>
          <p>阅读量</p>
          <p>状态</p>
          <p>发布时间</p>
          <p>操作</p>
      </div>
      <div v-for="(item,idx) in ComFromListStyleBoxMockArray" :key="idx" class="ComFromListStyleBox_contextFromList"></div>
  </div>
</template>

<script>
import {PlusOutlined,ReloadOutlined } from '@ant-design/icons-vue';
import Axios from 'axios';
export default {
  data() {
      return {
          ComFromListStyleBoxMockArray:[]//数据
      }
  },
  created() {
      this.ComFromListStyleBoxFunc();//数据函数
  },
  methods: {
      async ComFromListStyleBoxFunc(){
          let res = await Axios.get("/api/BlogsMock");
          this.ComFromListStyleBoxMockArray = res.data.data
      }
  },
  components:{
      PlusOutlined,
      ReloadOutlined
  }
}
</script>

<style>
.ComFromListStyleBox{
    width: 100%;
    height: 100%;
}
.ComFromListStyleBox_HeaderTitle{
    width: 100%;
    height: 50px;
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;

}
.ComFromListStyleBox_HeaderTitle>p{
    margin-top: 10px;
}
.ComFromListStyleBox_contextTitle{
     width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
}
.ComFromListStyleBox_contextFromList{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
}
</style>